<template>
    <view class="weather-box">
        <view class="location-row">
            <view class="location">
                <image class="location-icon" src="/static/images/location.png"></image>
                <text class="city-name">{{ weatherData.cityInfo?.city || '未知地区' }}</text>
            </view>
            <text class="date">{{ formatDate(weatherData.data?.forecast?.[0]?.ymd) }}</text>
        </view>

        <view class="current-weather">
            <view class="weather-left">
                <image
                    class="weather-icon"
                    :src="getWeatherIcon(weatherData.data?.forecast?.[0]?.type)"></image>
            </view>
            <view class="temp-row">
                <text class="temp-value">
                    {{ extractTemperature(weatherData.data?.forecast?.[0]?.high) }}
                </text>
                <text class="temp-unit">°</text>
            </view>
            <view class="weather-right">
                <view class="weather-desc">
                    <text>{{ weatherData.data?.forecast?.[0]?.type || '未知天气' }}</text>
                </view>
                <view class="weather-details">
                    <text class="humidity">湿度 {{ weatherData.data?.shidu || '未知' }}</text>
                    <text class="wind">
                        {{ weatherData.data?.forecast?.[0]?.fx || '未知风向' }}
                        {{ weatherData.data?.forecast?.[0]?.fl || '未知风力' }}
                    </text>
                </view>
            </view>
        </view>

        <view class="forecast">
            <view
                class="forecast-item"
                v-for="(item, index) in weatherData.data?.forecast?.slice(1, 6)"
                :key="index">
                <text class="day">{{ formatDay(item.week) }}</text>
                <image class="forecast-icon" :src="getWeatherIcon(item.type)"></image>
                <text class="forecast-temp">
                    {{ extractTemperature(item.high) }}/{{ extractTemperature(item.low) }}°
                </text>
            </view>
        </view>
    </view>
</template>

<script>
import { weather } from '@/utils/api/index.js'

export default {
    name: 'Weather',
    data() {
        return {
            weatherData: {
                cityInfo: {},
                data: {
                    forecast: [],
                },
            },
        }
    },
    created() {
        this.getWeatherInfo()
    },
    watch: {
        'weatherData.data.forecast': {
            handler(newVal) {
                if (newVal && newVal[0]) {
                    const temp = this.extractTemperature(newVal[0].high)
                    this.$emit('temperature-change', parseInt(temp))
                }
            },
            immediate: true
        }
    },
    methods: {
        getWeatherInfo() {
            weather
                .getWeatherInfo()
                .then((res) => {
                    if (res.code === 0 && res.data) {
                        try {
                            // 解析返回的JSON字符串
                            const parsedData = JSON.parse(res.data)
                            this.weatherData = parsedData
                        } catch (e) {
                            console.error('解析天气数据失败', e)
                        }
                    }
                })
                .catch((err) => {
                    console.error('获取天气信息失败', err)
                })
        },
        getWeatherIcon(weather) {
            if (!weather) return '/static/images/weather/unknown.png'

            const weatherMap = {
                晴: '/static/images/weather/sunny.png',
                多云: '/static/images/weather/cloudy.png',
                阴: '/static/images/weather/overcast.png',
                小雨: '/static/images/weather/light-rain.png',
                中雨: '/static/images/weather/moderate-rain.png',
                大雨: '/static/images/weather/heavy-rain.png',
                暴雨: '/static/images/weather/storm.png',
                大暴雨: '/static/images/weather/heavy-storm.png',
                特大暴雨: '/static/images/weather/severe-storm.png',
                阵雨: '/static/images/weather/shower.png',
                雷阵雨: '/static/images/weather/thunderstorm.png',
                雷阵雨伴冰雹: '/static/images/weather/thunderstorm-hail.png',
                小雪: '/static/images/weather/light-snow.png',
                中雪: '/static/images/weather/moderate-snow.png',
                大雪: '/static/images/weather/heavy-snow.png',
                暴雪: '/static/images/weather/blizzard.png',
                阵雪: '/static/images/weather/snow-shower.png',
                雨夹雪: '/static/images/weather/sleet.png',
                冻雨: '/static/images/weather/freezing-rain.png',
                雾: '/static/images/weather/fog.png',
                霾: '/static/images/weather/haze.png',
                浮尘: '/static/images/weather/dust.png',
                扬沙: '/static/images/weather/dust-storm.png',
                沙尘暴: '/static/images/weather/sandstorm.png',
                强沙尘暴: '/static/images/weather/severe-sandstorm.png',
            }

            return weatherMap[weather] || '/static/images/weather/unknown.png'
        },
        formatDate(dateStr) {
            if (!dateStr) return ''
            return dateStr
        },
        formatDay(week) {
            if (!week) return ''
            return week.replace('星期', '周')
        },
        extractTemperature(tempStr) {
            if (!tempStr) return ''
            // 从"高温 34℃"或"低温 28℃"中提取数字
            const match = tempStr.match(/\d+/)
            return match ? match[0] : ''
        },
    },
}
</script>

<style scoped lang="scss">
.weather-box {
    background-color: #fff;
    background: rgba(0, 0, 0, 0.01);
    box-shadow: 0px 8rpx 24rpx 20rpx rgba(190, 190, 190, 0.25);
    border-radius: 12rpx;
    border: 2rpx solid #ffffff;

    margin: 0 20rpx;

    .location-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;

        .location {
            display: flex;
            align-items: center;

            .location-icon {
                width: 30rpx;
                height: 30rpx;
                margin-right: 8rpx;
            }

            .city-name {
                font-family: OPPO Sans 4, OPPO Sans 40;
                font-weight: 500;
                font-size: 28rpx;
                color: #434343;
            }
        }

        .date {
            font-family: OPPO Sans 4, OPPO Sans 40;
            font-weight: 400;
            font-size: 28rpx;
            color: #a098ae;
        }
    }

    .current-weather {
        display: flex;
        padding: 10rpx 30rpx 30rpx;

        .weather-left {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 30rpx;

            .weather-icon {
                width: 120rpx;
                height: 120rpx;
            }
        }
        .temp-row {
            display: flex;
            align-items: center;
            margin-right: 30rpx;

            .temp-value {
                font-size: 80rpx;
                font-weight: bold;
                color: #434343;
                line-height: 1;
            }

            .temp-unit {
                font-size: 40rpx;
                color: #434343;
                margin-top: 12rpx;
            }
        }
        .weather-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .weather-desc {
                font-size: 28rpx;
                color: #363b64;
                margin-top: 8rpx;
                margin-bottom: 12rpx;
            }

            .weather-details {
                display: flex;
                flex-direction: row;
                align-items: center;

                .humidity,
                .wind {
                    font-size: 26rpx;
                    color: #363b64;
                    margin-right: 20rpx;
                }
            }
        }
    }

    .forecast {
        display: flex;
        border-top: 1px solid #f0f0f0;
        padding: 20rpx 0;

        .forecast-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;

            .day {
                font-size: 26rpx;
                color: #a098ae;
                margin-bottom: 12rpx;
            }

            .forecast-icon {
                width: 50rpx;
                height: 50rpx;
                margin-bottom: 12rpx;
            }

            .forecast-temp {
                font-size: 24rpx;
                color: #363b64;
            }
        }
    }
}
</style>
